<script setup name="Sparkline">
import sparkline from './sparkline'

const { proxy } = getCurrentInstance()

const props = defineProps({
    value: {
        type: Array,
        require: true
    },
    width: {
        type: Number,
        default: 100
    },
    height: {
        type: Number,
        default: 30
    },
    strokeWidth: {
        type: Number,
        default: 3
    },
    strokeColor: {
        type: String,
        default: '#dc2b33'
    },
    fillColor: {
        type: String,
        default: 'transparent'
    },
    cursorColor: {
        type: String,
        default: '#dc2b33'
    },
    spotColor: {
        type: String,
        default: '#dc2b33'
    },
    tooltip: {
        type: Boolean,
        default: false
    }
})

const tip = ref({
    show: false,
    content: '',
    top: 0,
    left: 0
})

onMounted(() => {
    sparkline(proxy.$refs.sparklineRef, props.value, props.tooltip && {
        onmousemove: (event, datapoint) => {
            tip.value.show = true
            tip.value.content = datapoint.tooltip
            tip.value.top = event.offsetY
            tip.value.left = event.offsetX + 20
        },
        onmouseout: () => {
            tip.value.show = false
        }
    })
})
</script>

<template>
    <div class="sparkline">
        <svg ref="sparklineRef" :width="width" :height="height" :stroke-width="strokeWidth" :stroke="strokeColor" :fill="fillColor" />
        <span v-if="tooltip" v-show="tip.show" class="tooltip" :style="[`left: ${tip.left}px`, `top: ${tip.top}px`]">{{ tip.content }}</span>
    </div>
</template>

<style lang="scss" scoped>
.sparkline {
    position: relative;
    :deep(.sparkline--cursor) {
        stroke: v-bind("cursorColor");
    }
    :deep(.sparkline--spot) {
        fill: v-bind("spotColor");
        stroke: v-bind("spotColor");
    }
    .tooltip {
        position: absolute;
        background: rgb(0 0 0 / 70%);
        color: #fff;
        padding: 2px 5px;
        font-size: 12px;
        white-space: nowrap;
        z-index: 9999;
    }
}
</style>
